<template>
  <div class="drawer-wrapper">
    <el-button type="primary" @click="openDrawer" :loading="isSubmitting" class="open-drawer-btn">
      编辑新闻
    </el-button>

    <el-drawer
      v-model="drawerVisible"
      title="编辑新闻"
      direction="rtl"
      size="70%"
      :before-close="handleBeforeClose"
      class="news-drawer"
      :destroy-on-close="true"
    >
      <el-form ref="formRef" :model="newsForm" label-width="90px" class="news-form">
     
        <div class="form-layout">
         
          <div class="form-left">
           
            <el-form-item label="新闻标题" class="form-item">
              <el-input
                v-model="newsForm.title"
                placeholder="请输入新闻标题"
                :maxlength="100"
                show-word-limit
                clearable
              />
            </el-form-item>

            
            <el-form-item label="新闻标签" class="form-item">
              <el-select
                v-model="newsForm.tags"
                placeholder="请选择新闻标签"
                clearable
                filterable
                allow-create
                default-first-option
              >
                <el-option
                  v-for="tag in availableTags"
                  :key="tag"
                  :label="tag"
                  :value="tag"
                />
              </el-select>
            </el-form-item>

           
            <el-form-item label="新闻来源" class="form-item">
              <el-input v-model="newsForm.source" placeholder="请输入新闻来源" clearable  disabled/>
            </el-form-item>

            
            <el-form-item label="新闻网址" class="form-item">
              <el-input
                disabled
                v-model="newsForm.url"
                type="url"
                placeholder="请输入新闻网址"
                clearable
              />
            </el-form-item>

  
            <el-form-item label="新闻摘要" class="form-item">
              <el-input
                v-model="newsForm.summary"
                type="textarea"
                :rows="5"
                placeholder="请输入新闻摘要"
                :maxlength="500"
                show-word-limit
                clearable
              />
            </el-form-item>
          </div>
          <div class="form-right">
            <el-form-item label="正文内容" class="form-item full-height">
              <el-input
                v-model="newsForm.content"
                type="textarea"
                :rows="25"
                placeholder="请输入正文内容"
                class="content-textarea"
              />
            </el-form-item>
          </div>
        </div>

        <div class="form-actions">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" :loading="isSubmitting" @click="handleSubmit"> 确定 </el-button>
        </div>
      </el-form>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch} from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { categoryList } from '@/components/JournaLism/category'

// 表单引用
const formRef = ref<FormInstance>()

// 抽屉状态
const drawerVisible = ref(false)
const isSubmitting = ref(false)

const props = defineProps<{
  newsData?: {
    id?: number
    title?: string
    summary?: string
    content?: string
    source?: string
    url?: string
    tags?: string
    originalData?: any
  }
}>()

// 定义emits
const emit = defineEmits<{
  update: [newsData: any]
  close: []
}>()

const availableTags = categoryList.map((category: any) => category.label)


const newsForm = reactive({
  title: '',
  tags: '',
  source: '',
  url: '',
  summary: '',
  content: '',
  id: undefined as number | undefined
})

// 监听新闻数据变化，更新表单
watch(
  () => props.newsData,
  (newData) => {
    if (newData) {
      newsForm.title = newData.originalData?.title || newData.title || ''
      newsForm.summary = newData.summary || ''
      newsForm.source = newData.source || ''
      newsForm.url = newData.originalData?.sourceUrl || newData.url || ''
      newsForm.content = newData.originalData?.markContent || newData.content || ''
      newsForm.id = newData.id
      
      // 设置标签
      if (newData.originalData?.classModel) {
        newsForm.tags = newData.originalData.classModel
      }
    }
  },
  { immediate: true, deep: true }
)

// 打开抽屉
const openDrawer = () => {
  drawerVisible.value = true
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    isSubmitting.value = true
    

    const submitData = {
      ...newsForm,
      id: newsForm.id,
    }
    

    await new Promise(resolve => setTimeout(resolve, 500))
    
    ElMessage.success('保存成功')
    emit('update', submitData)
    drawerVisible.value = false
  } catch (error) {
    ElMessage.error('保存失败，请检查表单')
  } finally {
    isSubmitting.value = false
  }
}

const handleBeforeClose = (done: () => void) => {
  done()
  emit('close')
}

const handleCancel = () => {
  drawerVisible.value = false
  emit('close')
}

defineExpose({
  openDrawer,
  handleCancel
})
</script>

<style scoped>
.drawer-wrapper {
  display: inline-block;
}

.open-drawer-btn {
  transition: all 0.3s ease;
}

.open-drawer-btn:hover {
  transform: translateY(-1px);
}

.news-drawer {
  --el-drawer-background-color: #fafafa;
  --el-drawer-width: 40%;
}

.news-drawer :deep(.el-drawer__header) {
  border-bottom: 2px solid #409eff;
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.news-drawer :deep(.el-drawer__body) {
  padding: 0 20px 20px;
  overflow-y: auto;
  max-height: calc(100vh - 80px);
}

.news-form {
  animation: fadeIn 0.3s ease;
}

.form-layout {
  display: flex;
  gap: 30px;
  height: calc(100vh - 220px);
}

.form-left {
  width: 40%;
  overflow-y: auto;
  padding-right: 15px;
  border-right: 1px solid #e6e6e6;
}

.form-right {
  width: 55%;
  display: flex;
  flex-direction: column;
}

.form-item {
  margin-bottom: 16px;
}

.content-textarea {
  flex: 1;
  resize: none;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 15px 0;
  margin-top: 20px;
  border-top: 1px solid #e6e6e6;
}

.form-actions .el-button {
  min-width: 80px;
}
</style>



